<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2020/12/14
  Time: 14:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;transform: translateY(-50%)}
    </style>
</head>
<body>


<%--添加/更新表单--%>
<form class="layui-form" style="display:none" lay-filter="uploadForm">
    <input type="hidden" id="bookId" value="" >
    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>
        <div class="layui-hide" id="uploadDemoView">
            <hr>
            <img src="" alt="上传成功后渲染" style="max-width: 196px">
        </div>
    </div>
</form>




<%--商品展示--%>
<table id="demo" lay-filter="firstTable"  class="layui-table" lay-data="{id: 'idTest'}" >
</table>



<script type="text/javascript" src="layui/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer','table','form','upload'],function (){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery
            ,upload = layui.upload;
        table.render({
            elem:'#demo',
            toolbar:'#addToolbar',
            done: function () {
                $("table").css("width", "100%");
            },
            url: 'products', //数据接口
            page: true ,//开启分页
            cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'bookId', title: 'ID',  sort: true,width:70}
                ,{field: 'bookName', title: '书名'}
                ,{field: 'bookPrice', title: '价格', width:70}
                ,{field: 'groundingdate', title: '上架时间'}
                ,{field: 'bookState', title: '销售状态'}
                ,{field: 'inventory', title: '库存',width:70}
                ,{field: 'author', title: '作者',width:70}
                ,{field: 'press', title: '出版社'}
              /*  ,{field: 'editnum', title: '编辑次数'}
                ,{field: 'printDate', title: '印刷时间',  sort: true}*/
              /*  ,{field: 'printCount', title: '版次',  sort: true}
                ,{field: 'isbn', title: 'ISBN'}
                ,{field: 'wordCount', title: '字数'}
                ,{field: 'pageCount', title: '页数'}*/
               /* ,{field: 'style', title: '类型'}
                ,{field: 'page', title: '纸质'}
                ,{field: 'pack', title: '包装'}
                ,{field: 'salenum', title: '已售'}*/
                ,{field: 'productImage', title: '图片'}
                ,{title: '操作',align:'center',toolbar:"#updateAndDeleteToolbar"}
            ]]
        });


        // 监听表格事件开始
        /**
         * 注意监控事件区别：头部工具栏事件和行工具栏事件的细微区别
         * 监听表格工具栏事件：
         * on中的属性：tool表示监听行工具栏事件
         *   toolbar表示监听头部工具栏事件
         */
        //监听行工具栏事件
        table.on('tool(firstTable)', function(obj){ //注：tool 是工具条事件名，firstTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            var bookId=data.bookId;

            //删除事件
            if(layEvent === 'delete'){
                layer.confirm('是否确认删除？', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url:"${pageContext.request.contextPath}/delete/"+data.id,
                        type:"delete",
                        dataType:"json",
                        success:function (data){
                            if (data.code===0){
                                table.reload("demo",{
                                    done:function (res,curr,count){
                                        if(res.data.length==0&&curr!==1){
                                            table.reload("demo",{page:{curr:curr-1}});
                                        }
                                    }
                                })
                                layer.msg("删除完成")
                            }
                        }
                    })
                });
                //更新事件
            } else if(layEvent === 'update'){
                location="update.jsp?bookId="+bookId;
            } else if(layEvent === 'add'){
                $("#bookId").val(data.bookId);
                console.log(data.bookId)
                var index = layer.open({
                    type:1
                    ,title:"上传图片"
                    ,content:$("form")
                    ,area:['250px', '200px']
                });
                //拖拽上传
                upload.render({
                    elem: '#test10'
                    ,url: 'uploadImage/'+$("#bookId").val() //改成您自己的上传接口
                    ,done: function(res){
                        layer.close(index)
                        layer.msg('上传成功');
                        //重载表格
                        table.reload("demo",{
                            done:function (res,curr,count){
                                if(res.data.length==0&&curr!==1){
                                    table.reload("demo",{page:{curr:curr-1}});
                                }
                            }
                        })
                    }
                });

            }
        });

        //监听头部工具栏事件
        var addIndex
        table.on('toolbar(firstTable)', function(obj){ //注：tool 是工具条事件名，firstTable 是 table 原始容器的属性 lay-filter="对应的值"
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deleteMany':
                    //多选删除
                    //监听firstTable表格的复选框事件
                    var checkStatus = table.checkStatus('demo'); //idTest 即为基础参数 id 对应的值
                    var data=checkStatus.data;//获取选中行的数据
                    var length=checkStatus.data.length//获取选中行数量
                    if(length!=0){
                        alert("多选删除")
                        //获取所有选中行的id
                        var jsonArray=[];
                        for(var i=0;i<data.length;i++){
                            jsonArray.push(data[i].bookId);
                        }
                        console.log(jsonArray)
                        $.ajax({
                            url:"products",
                            data:JSON.stringify(jsonArray),
                            type:"delete",
                            contentType: "application/json",
                            dataType:"json",
                            success:function (data) {
                                if (data.code===0){
                                    layer.msg("删除成功")
                                    table.reload("demo",{
                                        done:function (res,curr,count){
                                            if(res.data.length==0&&curr!==1){
                                                table.reload("demo",{page:{curr:curr-1}});
                                            }
                                        }
                                    })
                                }
                            }
                        });
                    }else{
                        layer.msg("未选中任何数据")
                    }

                    break;
            };

        });
        // 监听表格事件结束


    });






</script>
<script type="text/html" id="addToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="deleteMany">多选删除</button>
    </div>
</script>
<script type="text/html" id="updateAndDeleteToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加图片</button>
    </div>
</script>
</body>
</html>
